<template>
  <div>
    <!--低值易耗品表单搜索！-->
    <el-card class="top">
      <!--inline控制横竖排列-->
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <!-- 部门下拉选项 ：如果部门少，就在前端写死-->
        <el-form-item>
          <el-select v-model="queryForm.deptId" clearable placeholder="部门编码">
            <el-option v-for="(item, index) in DEPT_DATA" :key="index" :value="item.id" :label="item.name"
              @click="findUser_F(item.id)" />
          </el-select>
        </el-form-item>
        <!-- 人员下拉选项 方法：根据部门查询该部门的人员-->
        <el-form-item>
          <el-select v-model="queryForm.userId" clearable placeholder="使用人姓名">
            <el-option v-for="(item, index) in USER_DATA" :key="index" :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>
        <!-- 品名-->
        <el-form-item>
          <el-select v-model="queryForm.categoryId" clearable placeholder="品类">
            <el-option v-for="(n, index) in categoryList" :key="index" :value="n" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :icon="useRenderIcon(Search)" @click="getList">搜索</el-button>
          <el-button :icon="useRenderIcon(Refresh)" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!--低值易耗品table-->
    <el-card class="end">
      <el-button class="add-button-style" type="success" :icon="useRenderIcon(AddFill)"
        @click="handDialogValue">添加记录</el-button>
      <!--表格显示-->
      <el-table border align-whole="center" showOverflowTooltip table-layout="auto" :data="yhpData" stripe
        :header-cell-style="{
          background: '#f3f6fd',
          color: 'var(--el-text-color-primary)'
        }">
        <el-table-column :prop="item.prop" :label="item.label" v-for="(item, index) in options" :key="index" />

        <!--修改和详情！-->
        <el-table-column fixed="right" label="操作" width="160">
          <template #default="{ row }"> <!--获取当前行的数据-->
            <el-button link type="primary" size="small" @click="handDialogUpdate(row)">修改</el-button>
            <el-button link type="primary" size="small" @click="handDialogDetail(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页插件显示-->
      <el-pagination v-model:current-page="queryForm.currentPage" v-model:page-size="queryForm.limit"
        :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" class="pagination-style" />
    </el-card>

    <!--隐藏对话框-添加-->
    <DialogAdd v-model="dialogVisible" @func="getList"></DialogAdd>

    <!--隐藏对话框-修改更新-->
    <DialogUpdate v-model="dialogUpdate" @func="getList" :dialogTableValue="dialogTableValue"></DialogUpdate>

    <!--隐藏对话框-详情-->
    <DialogDetail v-model="dialogDetail" @func="getList" :dialogDetailValue="dialogDetailValue"></DialogDetail>
  </div>
</template>


<script setup lang='ts'>
import { ref } from "vue";
import { getListYhp, findDept, findUser } from "@/api/lvcManage/yhpApplication";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { options } from "./options";
import DialogAdd from "./components/DialogAdd.vue"
import DialogUpdate from './components/DialogUpdate.vue'
import DialogDetail from './components/DialogDetail.vue'

import Search from "@iconify-icons/ep/search";
import Refresh from "@iconify-icons/ep/refresh";
import AddFill from "@iconify-icons/ri/add-circle-line";
defineOptions({
  name: "LvcInput"
});

const currentPage = ref(1);
const limit = ref(10);
const queryForm = ref({
  currentPage: 1, // 当前页
  limit: 10, // 每页总数
  deptId: "",
  userId: "",
  categoryId: ""
});

//根据部门id获取所有人员
const USER_DATA = ref([])   //部门
//获取所有的部门
const DEPT_DATA = ref([])   //部门人员
const findDept_F = async () => {
  const response = await findDept()
  DEPT_DATA.value = response.data
}
findDept_F()

//根据部门id，获取部门的人
const findUser_F = async (id) => {   //id代表当前被选中的品类
  console.log(id)
  USER_DATA.value = null
  const response = await findUser(id)
  USER_DATA.value = response.data
}

const deptList = ref(["研发五室", "研发二室", "123", "413", "研发一室"]); // 所有部门的数组
const userList = ref(["邵庆锋", "车佶", "张倩", "李思泽", "李昊轩"]); // 该部门下，所有的人员
const categoryList = ref(["cpu", "钢笔", "铅笔", "电脑", "手机", "游戏套装"]);

const yhpData = ref([]); // yhpData为表格的数据
const total = ref(10); // total总记录数

//按照后端接口改造
const a1 = ref({
  name: "deptId",
  value: ""
});
const a2 = ref({
  name: "userId",
  value: ""
});
const a3 = ref({
  name: "categoryId",
  value: ""
});
const queryList = ref({
  pageNum: 1,
  pageSize: 10,
  params: [{}]
});
// 条件查询带分页功能函数方法
const getList = async () => {
  console.log("搜索！");
  a1.value.value = queryForm.value.deptId;
  a2.value.value = queryForm.value.userId;
  a3.value.value = queryForm.value.categoryId;

  queryList.value.pageNum = queryForm.value.currentPage;
  queryList.value.pageSize = queryForm.value.limit;
  queryList.value.params[0] = a1.value;
  queryList.value.params[1] = a2.value;
  queryList.value.params[2] = a3.value;
  const response = await getListYhp(queryList.value);
  console.log(response);
  //yhpData.value = response.data;
  yhpData.value = response.data.content;
  //yhpData.value = response.data;
};
getList();

// 当每页条数改变时，调用此函数
const handleSizeChange = limit => {
  // console.log("限制")
  queryForm.value.currentPage = 1;
  queryForm.value.limit = limit;
  getList();
};
// 当页数改变时,调用此函数
const handleCurrentChange = currentPage => {
  // console.log("当前")
  queryForm.value.currentPage = currentPage;
  getList();
};

//重置表单
const resetForm = async () => {
  queryForm.value.deptId = "";
  queryForm.value.userId = "";
  queryForm.value.categoryId = "";
  getList()
};

// 添加方法
const dialogVisible = ref(false);
const handDialogValue = () => {
  dialogVisible.value = true;
};

// 修改方法
const dialogUpdate = ref(false)
const dialogTableValue = ref({})
const handDialogUpdate = (row) => {

  dialogUpdate.value = true
  dialogTableValue.value = JSON.parse(JSON.stringify(row))
  //console.log('-----------')
  //console.log(dialogTableValue.value)
}

//查看详情
const dialogDetail = ref(false)
const dialogDetailValue = ref({})
const handDialogDetail = (row) => {
  dialogDetail.value = true
  dialogDetailValue.value = JSON.parse(JSON.stringify(row))
}
</script>

<!--margin 上 右 下 左 -->
<style>
.top {
  margin: 20px 10px 0px 10px;
}

.end {
  margin: 20px 10px 10px 10px;
}

.header {
  padding-bottom: 16px;
  box-sizing: border-box;
}

.add-button-style {
  margin-bottom: 10px;
  float: right;
}

.pagination-style {
  margin-top: 15px;
  margin-bottom: 15px;
  margin-right: 10px;
  float: right;
}
</style>